<template>
  <!-- 引入 BasePageTable 组件 -->
  <BasePageTable
    class="decoration-knowledge-list"
    :tableData="tableData"
    :loading="loading"
    :pageNum="pageNum"
    :pageSize="pageSize"
    :total="total"
    :tableColumnsData="tableColumnsData"
    @handleQuery="handleQuery"
  >
    <!-- 自定义列内容 -->
    <template #mainImage="{ row }">
      <el-image
        style="width: 100px; height: 100px"
        :src="JSON.parse(row.image)[0].url || ''"
        fit="cover"
      ></el-image>
    </template>

    <template #isTop="{ row }">
      <el-switch v-model="row.isTop" @change="handleSwitchChange(row, 'isTop')"></el-switch>
    </template>

    <template #discussFlag="{ row }">
      <el-switch
        v-model="row.discussFlag"
        @change="handleSwitchChange(row, 'discussFlag')"
      ></el-switch>
    </template>

    <template #operation="{ row }">
      <el-button
        v-hasPermi="['monitor:online:forceLogout']"
        link
        type="primary"
        icon="View"
        @click="handlePreview(row)"
      >
        查看
      </el-button>
      <el-button
        v-hasPermi="['monitor:online:forceLogout']"
        link
        type="primary"
        icon="Delete"
        @click="handleDelete(row)"
      >
        删除
      </el-button>
      <el-button
        v-hasPermi="['monitor:online:forceLogout']"
        link
        type="primary"
        icon="Edit"
        @click="handleEdit(row)"
      >
        编辑
      </el-button>
    </template>
  </BasePageTable>
</template>

<script setup name="Online">
import { deleteArticle } from "@/api/article";
import { getArticleList } from "@/api/article";
import { articleType } from "@/utils/enums/article";
import { ref, watchEffect } from "vue";
import BasePageTable from "@/components/BasePageTable/index.vue"; // 引入 BasePageTable 组件
import { ElMessageBox, ElMessage } from "element-plus";

const reallyUrl = import.meta.env.VITE_API_IMAGE;
const emit = defineEmits(["editArticle", "update:categoryId", "preview"]);

const props = defineProps({
  categoryId: {
    type: Number,
    default: 0,
  },
  type: {
    default: Number || String,
  },
});

const loading = ref(false);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const tableData = ref([]);

// 定义表格列数据
const tableColumnsData = ref([
  {
    label: "标题",
    prop: "title",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    label: "主图",
    prop: "mainImage",
    width: 180,
    align: "center",
    customSlot: "mainImage", // 自定义插槽名称
  },
  {
    label: "操作",
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
    width: 220,
  },
]);

// 方案1：使用 watchEffect
watchEffect(() => {
  if (props.categoryId) {
    pageNum.value = 1;
    getList();
  }
  if (props.type == 3) {
    tableColumnsData.value = [
      {
        label: "标题",
        prop: "title",
        width: 200,
        align: "center",
        showOverflowTooltip: true,
      },
      {
        label: "主图",
        prop: "mainImage",
        width: 180,
        align: "center",
        customSlot: "mainImage", // 自定义插槽名称
      },
      {
        label: "操作",
        align: "center",
        fixed: "right",
        customSlot: "operation", // 自定义插槽名称
      },
    ];
  }
});

/** 查询列表 */
function getList() {
  loading.value = true;
  const params = {
    types: [props.type],
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  !!props.categoryId && (params.categoryId = props.categoryId);
  getArticleList(params)
    .then((response) => {
      tableData.value = response.list;
      total.value = response.total;
    })
    .catch((err) => {
      console.log(err, "err");
    })
    .finally(() => {
      loading.value = false;
    });
}

const initList = () => {
  pageNum.value = 1;
  getList();
};

/** 搜索按钮操作 */
function handleQuery(val) {
  pageNum.value = val.page;
  pageSize.value = val.limit;
  getList();
}

/** 编辑按钮操作 */
function handleEdit(row) {
  emit("editArticle", row);
}

/** 删除按钮操作 */
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(`是否确认删除名称为"${row.title}"的文章?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    await deleteArticle(row.id);
    ElMessage.success("删除成功");
    getList();
  } catch (err) {
    console.log(err, "err");
  }
};

function handleSwitchChange(row, type) {
  console.log(row, type);
}

/**
 * 预览功能
 */
const handlePreview = (row) => {
  console.log(row, "row");
  emit("preview", row);
};
// 如果需要在组件内部修改 categoryId
const updateCategoryId = (newValue) => {
  emit("update:categoryId", newValue);
};

defineExpose({
  initList,
});
</script>

<style scoped>
.decoration-knowledge-list {
  flex: 1;
}
</style>
